<!-- 主播列表 -->
<template>
  <van-popup
    v-model:show="showBottom"
    position="bottom"
    closeable
    round
    @closed="closedPup()"
  >
    <van-nav-bar title="请选择充值金币" />
    <div class="gold-coin-recharge-main">
      <div class="gold-coin-recharge">
        <div
          class="gold-coin-recharge-item"
          :class="active == item.id ? 'gold-coin-recharge-item-current' : ''"
          v-for="item in setMealList"
          :key="item.id"
          @click="setMealChange(item)"
        >
          <div class="gold-coin-recharge-item-head">
            <img src="../../assets/image/img13.png" alt="" />
            <span>{{ item.gold }}</span>
          </div>
          <p>￥{{ item.amount }}</p>
        </div>
      </div>
    </div>
    <!-- <div class="gold-coin-recharge-item-custom">
      <van-field
        v-model="amountValue"
        type="number"
        label="其他金额"
        placeholder="请输入充值金额"
      />
    </div> -->
    <div class="round-btn footer-box">
      <van-button
        type="primary"
        round
        block
        :loading="isLoading"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="payOrder"
        >立即充值</van-button
      >
    </div>
  </van-popup>
</template>
<script setup>
import { onMounted, ref } from "vue";

import { GetSetMeal } from "@/api/common.js";

import { showToast } from "vant";

import {
  CreateGoodsOrder, // 新增订单
} from "@/api/goods/index.js";

const emits = defineEmits(["update:UpdateIsHide"]);
const props = defineProps({
  isHide: {
    type: Boolean,
    default: false,
  },
});

let showBottom = ref(false);
let amountValue = ref(0);
let active = ref(null);

showBottom.value = props.isHide;

const setMealChange = (item) => {
  active.value = item.id;
};

const closedPup = () => {
  showBottom.value = false;
  emits("update:UpdateIsHide", false);
};

let setMealList = ref([]);
const GetSetMealList = async () => {
  let { data } = await GetSetMeal();
  setMealList.value = data;
  active.value = data[0].id;
};

let isLoading = ref(false);

const payOrder = async () => {
  let params = {
    goodsId: amountValue.value == "0" ? active.value : "",
    goldAmount: amountValue.value != "0" ? Number(amountValue.value) : 0,
    orderType: 4,
  };
  isLoading.value = true;
  let datares = await CreateGoodsOrder(params);
  let resData = datares.data;
  isLoading.value = false;  
  document.getElementById("payMent").innerHTML = resData;
  // let namevalue = document.getElementsByName("biz_content")[0].value;
  // orderNum = JSON.parse(namevalue);
  // localStorage.setItem("out_trade_no", orderNum.out_trade_no);
  document.forms[0].setAttribute("target", "_self"); // 当前窗口跳转
  document.forms[0].submit();
  document.getElementById("payMent").innerHTML = "";
  isLoading.value = false;
};

onMounted(() => {
  GetSetMealList();
});
</script>
  
  
<style lang="scss" scoped>
.gold-coin-recharge {
  padding: 20px 0 0 15px;
  display: flex;
  flex-flow: wrap;
}
.gold-coin-recharge-item {
  width: calc(33.33% - 15px);
  background: #f2f2f2;
  border-radius: 8px;
  padding: 15px 0;
  flex: none;
  margin: 0 15px 15px 0;
  border: 2px solid #f2f2f2;
  box-sizing: border-box;
  .gold-coin-recharge-item-head {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 20px;
      font-weight: bold;
      height: 1;
      line-height: 1;
    }
  }
  img {
    display: block;
    width: 24px;
  }
  p {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-top: 5px;
  }
}
.gold-coin-recharge-item-custom {
  margin: 0 15px 15px 15px;
  .van-cell {
    background: #f2f2f2;
    border-radius: 8px;
  }
}
.round-btn {
  margin: 0 15px;
  padding-bottom: 20px;
}
.gold-coin-recharge-item-current {
  background: $default-color-l1;
  border-color: $default-color;
}
</style>
  